<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
  </head>
  <body>
    <div id="app">
      <button type="button" class="btn btn-large btn-block btn-default" @click="flag=!flag">点我</button>
      <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <h1 v-if="flag">这是一个h1</h1>
      </transition -->

      <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
        <h1 v-if="flag" class="animated">这是一个h1</h1>
      </transition -->

      <transition
      enter-active-class="animated bounceIn"
      leave-active-class="animated bounceOut"
      :duration="{enter: 200, leave: 400 }">
        <h1 v-if="flag" class="animated">这是一个h1</h1>
      </transition
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          flag: false
        },
        methods: {

        }
      })
    </script>



  </body>
</html>
